<template>
  <div class="info-item">
    <div class="title-info">
      <svg-icon name="home-travel-record"></svg-icon>
      <span class="sub-title">旅行记录</span>
    </div>

    <div v-if="travelStore.currentTravelSpot.recordList.length > 0" class="info record-info">
      <el-timeline>
        <el-timeline-item v-for="(item, index) in travelStore.currentTravelSpot.recordList"
                          :key="index" :timestamp="item.date" placement="top">
          <el-card class="record-card">
            <span class="record-content">旅行人：{{ item.persons.join('-') }}</span>
            <el-image v-for="(image, index) in item.imageList" :key="index"
                      :src="serviceFileRootPath + image"
                      :preview-src-list="[serviceFileRootPath + image]"
                      fit="contain" alt="暂无图片" class="record-image"/>

            <video v-for="(video, index) in item.videoList"
                   :key="index" controls style="width: 60%;min-height: 200px;">
              <source :src="serviceFileRootPath + video" type="video/mp4">
              您的浏览器不支持 HTML5 视频
            </video>

<!--            <el-carousel v-if="item.imageList.length > 0"-->
<!--                         arrow="always">-->
<!--              <el-carousel-item v-for="(item, index) in item.imageList" :key="index">-->
<!--                -->
<!--              </el-carousel-item>-->
<!--            </el-carousel>-->

<!--            <el-empty v-else description="暂无记录"/>-->
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-empty v-else description="暂无记录"/>
  </div>
</template>

<script setup lang="ts">
import { SvgIcon } from 'vue3-common'
import { useTravelStore } from '@/store/travel.ts'
import { serviceFileRootPath } from '@/utils'

const travelStore = useTravelStore()
</script>
